<template>
  <!-- 主煤流运行监测 -->
  <HerinContainer class="MainCoal-box" :delay="1" direction="Left" title="带式输送机统计">
    <!-- 内容区 -->
    <div slot="content" class="MainCoal-box-content">
      <div class="content-top">
        <div class="top-left">
          <img class="top-left-img" src="@/assets/img/coalflow/top-left.png" alt="">
          <span class="top-left-span">带式输送机</span>
        </div>
        <div class="top-right">
          <span class="top-right-num">6</span><span class="company">个</span>
        </div>
      </div>
      <div class="content-center">
        <div class="center-left">
          <div class="chart-box">
            <Liquid text="开机率" :total="100" :x="67"></Liquid>
          </div>
        </div>
        <div class="center-right">
          <div class="center-right-item" v-for="(item,index) in CRightLists" :key="index">
            <div>
              <span :class="[item.name === '开机' ? 'kj-bg' : item.name === '故障' ? 'gz-bg' : 'tj-bg'  ,'circular']"></span>
              <span class="item-name">{{item.name}}</span>
            </div>
            <div>
              <span :class="[item.name === '开机' ? 'kj' : item.name === '故障' ? 'gz' : 'tj'  ,'item-num']">{{item.num}}</span>
              <span class="company">个</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content-category"><span>输送机区域分类</span></div>
      <div class="content-bottom">
        <div class="bottom-left">
          <RoseChart :data="cateLists" :color="color1" />
        </div>
        <div class="bottom-right">
          <div class="legend">
            <Legend1
            v-for="(item, idx) in cateLists"
            :key="item.x"
            class="item"
            :name="item.x"
            :num="item.y"
            :color="color1[idx]"
            unit=""></Legend1>
          </div>
        </div>
      </div>
    </div>
  </HerinContainer>
</template>

<script>
import HerinContainer from '@/components/HerinContainer';
import RoseChart from '@/components/chart/pie/RoseChart.vue';
import Legend1 from '@/components/chart/legend/Legend1.vue';
import Liquid from '@/components/chart/pie/Liquid.vue';

const orderKeys = ['主斜井', '西翼集中胶带大巷', '4煤胶带大巷', '101皮带栈桥'];
const lists = [
  {
    'alarmCount': 24,
    'level1': 'COAL_FLOW',
    'level1Desc': '主斜井'
  },
  {
    'alarmCount': 3,
    'level1': 'ENVIRONMENT',
    'level1Desc': '西翼集中胶带大巷'
  },
  {
    'alarmCount': 77,
    'level1': 'WATER_DRAIN',
    'level1Desc': '4煤胶带大巷'
  },
  {
    'alarmCount': 33,
    'level1': 'WATER_DRAIN',
    'level1Desc': '101皮带栈桥'
  }
];

export default {

  components: {
    HerinContainer,
    Legend1,
    RoseChart,
    Liquid
  },
  data() {
    return {
      CRightLists: [
        { name: '开机', num: 4 },
        { name: '故障', num: 2 },
        { name: '停机', num: 3 }
      ],
      color1: ['#34C8FF', '#57FFAA', '#34C8FF', '#FFD100', '#FB9B2A']
    };
  },
  computed: {
    cateLists() {
      return this.formatChartData(orderKeys, lists);
    }
  },
  methods: {
    // 调整图表数据格式，以及数据元素的排列顺序
    formatChartData(orderKeys, origin) {
      return orderKeys.map((orderKey) => {
        for (const item of origin) {
          if (orderKey === item.level1Desc) {
            return {
              x: item.level1Desc,
              y: item.alarmCount
            };
          }
        }
        return {
          x: orderKey,
          y: 0
        };
      });
    }
  }
};
</script>

<style lang='scss' scoped>
.MainCoal-box{
  &-content{
    .company{
      color: #838383;
      font-size: .75rem;
    }
    .content-top{
      width:20.625rem ;
      height: 2.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .625rem;
      background-color: #1D2E45;
      border-radius: .25rem;
      padding: .9375rem;
      box-sizing: border-box;
      .top-left{
        .top-left-img{
          width: .875rem;
          height: .875rem;
          margin-right: .625rem;
          vertical-align:middle;
        }
        .top-left-span{
          font-size: .875rem;
          color: #F8F8F8;
          vertical-align:middle;
        }
      }
      .top-right-num{
        color: #00FDFF;
        font-size: 1rem;
        margin-right: .3125rem;
      }
    }
    .content-center{
      width:20.625rem ;
      height: 6.75rem;
      display: flex;
      align-items: center;
      border-bottom: .625rem;
      .center-left{
        width: 100%;
        flex: 1;
        .chart-box{
          width: 5.9375rem;
          height: 5.9375rem;
          margin: 0 auto;
        }
      }
      .center-right{
        width: 10.3125rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #1D2E45;
        border-radius: .25rem;
        padding: .9375rem;
        box-sizing: border-box;
        .center-right-item{
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          .circular{
            width: .25rem;
            height: .25rem;
            border-radius: 50%;
            margin-right: .625rem;
            display: inline-block;
          }
          .item-num{
            font-size: 1rem;
            margin-right: .3125rem;
          }
          .item-name{
            color: #F8F8F8;
            font-size: .875rem;
          }
          .kj{
            color:#57FFAA;
          }
          .kj-bg{
            background-color: #57FFAA;
          }
          .gz{
            color:#EF303B;
          }
          .gz-bg{
            background-color: #EF303B;
          }
          .tj{
            color:#ADADAD;
          }
          .tj-bg{
            background-color:#ADADAD;
          }
        }
      }

    }
    .content-category{
      height: 1.125rem;
      text-align: left;
      color: #D9D9D9;
      font-size: .875rem;
      margin-top: .625rem;
      margin-bottom: .625rem;
    }
    .content-bottom{
      width: 20.625rem;
      height: 9.875rem;
      display: flex;
      .bottom-left{
        width: 9.875rem;
        height: 9.875rem;
        margin-right: .9375rem;
      }
      .bottom-right{
        flex: 1;
        width: 100%;
        .legend{
          height: 100%;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          .item{
            width: auto;
          }
        }
      }
    }
  }
}
</style>
